<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MonkeyWebGame</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--    <canvas id="canvas1" style="border:1px solid"></canvas>-->
<div id="gameBoard">
    <img class="cloud" z-index="2" id="bgIMG" width="1500" height="940" src="img/g.png">
    <img id="ropes1">
    <img id="ropes2">
<!--    <img id="rope3">-->
<!--    <img id="rope4">-->
<!--    <img id="rope5">-->
    <img id="seat1">
    <img id="seat2">
    <div id="monkeysBoard">
        <img class="board" src="img/board.png" width="575" height="450">
        <img id="wukong">
        <img id="choose">
        <input id="num_input" type="text" name="number">
        <button id="num_button" onclick="startThisRound()">確定</button>
        <img class="trash" src="img/door.png" width="240" height="180" ondrop="dropOnTrash(event)" ondragover="allowDrop(event)">
        <audio style="display: none" id="audio"></audio>
    </div>

    <div id="grassBoard" ondrop="dropOnGrass(event)" ondragover="allowDrop(event)"></div>
</div>


    <script type="text/javascript">
        //把这个结果存到数据库即可 user + result + time
        function sendResultToServer(gameResult){

        }

        //猴子报数
        function makeSound(index){
            let audio=document.getElementById('audio');
            audio.setAttribute("src","");
            switch (index){
                case 1:
                    audio.setAttribute("src","sound/1.mp3");
                    break;
                case 2:
                    audio.setAttribute("src","sound/2.mp3");
                    break;
                case 3:
                    audio.setAttribute("src","sound/3.mp3");
                    break;
                case 4:
                    audio.setAttribute("src","sound/4.mp3");
                    break;
                case 5:
                    audio.setAttribute("src","sound/5.mp3");
                    break;
                case 6:
                    audio.setAttribute("src","sound/6.mp3");
                    break;
                case 7:
                    audio.setAttribute("src","sound/7.mp3");
                    break;
                case 8:
                    audio.setAttribute("src","sound/8.mp3");
                    break;
                default:
                    break
            }
            audio.load();
            audio.play();
        }

        //记录游戏结果
        let gameResult = 0

        //可以选择猴子的小白板
        let monkeysBoard = document.getElementById("monkeysBoard")
        //容纳猴子的草地
        let grassBoard = document.getElementById("grassBoard")
        //白板上的猴子们
        let monkeysOnBoard = []
        //草地上的猴子们
        let monkeysOnGrass = []
        class monkeyChild {
            constructor(mtype,width,height) {
                this.mkDiv = document.createElement("div")
                this.mkDiv.id = "monkey" + String(-1)
                this.mkDiv.draggable=true
                this.mkDiv.ondragstart = ev =>{
                    ev.dataTransfer.setData("title","deleteMonkey")
                    ev.dataTransfer.setData("id",ev.target.id)
                }

                //1
                this.img = new Image(width,height)

                this.img.mtype = mtype
                this.img.src = "img/monkey/" + mtype + ".gif"
                this.img.draggable=false

                this.mkDiv.appendChild(this.img)
                this.img.style.position = 'absolute'
                this.img.style.zIndex = '1'
                //2
                this.msgImg = new Image(180,110)
                this.msgImg.src='img/qipao.png'
                this.msgImg.style.zIndex = '2'
                //3
                this.msgVal = document.createElement("h1")
                this.msgVal.innerText="4"
                this.msgVal.style.zIndex = '3'

                this.mkDiv.appendChild(this.msgImg)
                this.mkDiv.appendChild(this.msgVal)

                this.msgImg.style.position='absolute'
                this.msgImg.style.left = 80 + 'px'
                this.msgImg.style.top = -50 + 'px'
                this.msgVal.style.position='absolute'
                this.msgVal.style.left = 157 + 'px'
                this.msgVal.style.top = -40 + 'px'

                this.msgImg.style.display='none'
                this.msgVal.style.display='none'
            }
        }

        //drop操作
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function adjustPosition() {
            let increase = Math.PI * 2/monkeysOnGrass.length;
            let x = 0, y = 0, angle = 0;

            for (let i = 0; i < monkeysOnGrass.length; i++) {
                let elem = monkeysOnGrass[i].mkDiv;
                elem.id = "monkey" + i.toString()
                // console.log("set",elem.id)
                // modify to change the radius and position of a circle
                x = 350 * Math.cos(angle) + 700;
                y = 140 * Math.sin(angle) + 180;
                elem.style.position = 'absolute';
                elem.style.left = x + 'px';
                elem.style.top = y + 'px';
                angle += increase;
            }
        }

        function dropOnTrash(ev) {
            ev.preventDefault();
            if(ev.dataTransfer.getData("title")!=="deleteMonkey"){
                return;
            }
            let mid = ev.dataTransfer.getData("id");
            // console.log("de "+mid)
            document.getElementById(mid).remove()
            let arr = mid.split("monkey")
            let index = arr[1]
            monkeysOnGrass.splice(Number(index),1)
            adjustPosition()
        }

        function dropOnGrass(ev) {
            ev.preventDefault();
            if(ev.dataTransfer.getData("title")!=="addMonkey"){
                return;
            }
            if(monkeysOnGrass.length>=8){
                alert('草地上最多只能装下8猴子~')
                return
            }
            // console.log('addFlag')
            let mtype = ev.dataTransfer.getData("mtype");
            let width = ev.dataTransfer.getData("width");
            let height = ev.dataTransfer.getData("height");
            let mc = new monkeyChild(mtype,width,height)
            monkeysOnGrass.push(mc)
            grassBoard.appendChild(mc.mkDiv)
            adjustPosition()
        }
        //猴子class
        class monkeyParent {
            constructor(mtype,width,height,top,left) {
                this.img = new Image(width,height)
                this.img.mtype = mtype
                this.img.src = "img/monkey/" + mtype + ".gif"
                this.img.style.position = "absolute"
                this.img.style.top = top + "px"
                this.img.style.left = left + "px"
                this.img.draggable=true
                this.img.ondragstart= ev => {
                    ev.dataTransfer.setData("title","addMonkey")
                    ev.dataTransfer.setData("mtype", ev.target.mtype)
                    ev.dataTransfer.setData("width", ev.target.width)
                    ev.dataTransfer.setData("height", ev.target.height)
                }
            }
        }

        //所有猴子对象

        monkeysOnBoard[0] = new monkeyParent("eating",120,120,'75','40')
        monkeysOnBoard[1] = new monkeyParent("liuhan",110,110,'80','220')
        monkeysOnBoard[2] = new monkeyParent("niu",120,120,'75','400')
        monkeysOnBoard[3] = new monkeyParent("shuaiqi",140,140,'180','105')
        monkeysOnBoard[4] = new monkeyParent("zixin",110,110,'210','325')
        //把猴子添加到白板上
        for(let i=0;i<5;i++){
            monkeysBoard.appendChild(monkeysOnBoard[i].img)
        }

        //上一次踢出去的猴子序号
        let lastKicked = 0

        function startThisRound(){
            let len = monkeysOnGrass.length
            let num = Number(document.getElementById("num_input").value)
            let i = lastKicked
            let count = 1

            let intervalId = setInterval(()=>{
                //清掉上只猴子的气泡
                let last = (i===0) ? len-1 : i-1
                monkeysOnGrass[last].msgImg.style.display='none'
                monkeysOnGrass[last].msgVal.style.display='none'
                i = (i===len) ? 0 : i
                console.log('be'+i)
                monkeysOnGrass[i].msgVal.innerText= count.toString()
                monkeysOnGrass[i].msgImg.style.display='block'
                monkeysOnGrass[i].msgVal.style.display='block'

                makeSound(count)

                console.log("count="+count)
                console.log("num="+num)
                if(count>=num){
                    setTimeout(()=>{
                        if(monkeysOnGrass.length===2){
                            let loser = i;
                            let winner = (i+1)%monkeysOnGrass.length
                            //进入决胜阶段
                            monkeysOnGrass[loser].msgImg.style.display='none'
                            monkeysOnGrass[loser].msgVal.style.display='none'
                            monkeysOnGrass[winner].msgImg.style.display='none'
                            monkeysOnGrass[winner].msgVal.style.display='none'

                            //i loser
                            monkeysOnGrass[loser].img.src="img/monkey/lose.gif"
                            monkeysOnGrass[loser].img.width=160
                            monkeysOnGrass[loser].img.height=160
                            //(i+1)%len winner
                            monkeysOnGrass[winner].img.src="img/monkey/win.gif"
                            monkeysOnGrass[winner].img.width=160
                            monkeysOnGrass[winner].img.height=160

                            monkeysOnGrass[winner].msgImg.src="img/huangguan.png"
                            monkeysOnGrass[winner].msgImg.width = 130
                            monkeysOnGrass[winner].msgImg.height = 90
                            monkeysOnGrass[winner].msgImg.style.left = 8 + 'px'
                            monkeysOnGrass[winner].msgImg.style.top = -60 + 'px'
                            monkeysOnGrass[winner].msgImg.style.display = "block"

                            let rayImg = new Image(600,600)
                            rayImg.src= "img/rotating.png"
                            rayImg.id = "rays"
                            monkeysOnGrass[winner].mkDiv.appendChild(rayImg)

                            monkeysOnGrass[winner].mkDiv.classList.add("goToMountain")


                            gameResult = monkeysOnGrass[winner].mtype + " monkey"
                            sendResultToServer(gameResult)

                        }else {
                            document.getElementById("monkey"+i).remove()
                            monkeysOnGrass.splice(i,1)
                            lastKicked = i
                            adjustPosition()
                        }
                    },1000)
                    clearInterval(intervalId)
                    return
                }
                count++
                i = (i+1)%monkeysOnGrass.length
            },1200)

        }

    </script>

</body>
</html>
